<template>
  <div>
    <v-tabs
        fixed-tabs
        dark
        class="tabs"
        :value="tab"
    >
      <v-tab @click="handleTabs(0)">
        文献
      </v-tab>
      <v-tab-item style="margin-top: 10px;">
        <div style="width: 100%; margin-left: 0%; margin-top: 10px; margin-bottom: 10px">
          <search-card :cond-first.sync="condFirst" :cond-list.sync="condList" :advanced-search="advancedSearch" :origin="origin"></search-card>
        </div>
      </v-tab-item>
      <v-tab @click="handleTabs(1)">
        RESEARCHERS
      </v-tab>
      <v-tab-item style="margin-top: 10px;">
        <div style="width: 100%; margin-left: 0%; margin-top: 10px; margin-bottom: 10px">
          <researcher-card :cond-first="condFirstRe" :cond-list="condListRe" :advanced-search="advancedSearchRe"></researcher-card>
        </div>
      </v-tab-item>
    </v-tabs>

    <v-row v-if="this.tab === 0" style="margin-top: 20px">

      <v-col cols="8" sm="1"></v-col>

      <v-col cols="8" sm="2">
        <v-expansion-panels v-model="panel" multiple>
          <v-expansion-panel>
            <v-expansion-panel-header>关键词</v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-list>
                <v-list-item class="keyWord"
                             v-for="(item,index) in keywords_show"
                             :key="index"
                             :class="`d-flex px-0 ${index > 0 ? 'mt-4':''}`"
                             @click="handleKeyword(index)"
                >
                  <div class="d-flex align-center flex-grow-1 flex-wrap" >
                    <div v-if="index === keyword.index && keyword.flag" class="me-auto pe-2" style="color: #9155fd; font-size: large;font-family: Dubai,serif">
                        {{ item.value_zh !== undefined ? item.value_zh: item.value }}
                    </div>
                    <div v-else class="me-auto pe-2" style="font-size: large;font-family: Dubai,serif">
                      {{ item.value_zh !== undefined ? item.value_zh: item.value }}
                    </div>
                  </div>
                </v-list-item>
                <div class="mdiPlus" @click="change_keyword_show_all(true)" v-if="!keyword_show_all">
                  展开
                  <v-icon >
                    {{icons.mdiPlus}}
                  </v-icon>
                </div>
                <div class="mdiMinus" @click="change_keyword_show_all(false)" v-if="keyword_show_all">
                  收起
                  <v-icon >
                    {{icons.mdiMinus}}
                  </v-icon>
                </div>
              </v-list>
            </v-expansion-panel-content>
          </v-expansion-panel>

          <v-expansion-panel>
            <v-expansion-panel-header>机构</v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-list>
                <v-list-item class="keyWord"
                             v-for="(item,index) in org_show"
                             :key="index"
                             :class="`d-flex px-0 ${index > 0 ? 'mt-4':''}`"
                             @click="handleOrg(index)"
                >
                  <div style="display: grid">
                    <div v-if="index === author_org.index && author_org.flag" class="me-auto pe-2" style="color: #9155fd; font-size: large;font-family: Dubai,serif; margin-bottom: 5px">
                        {{ item.value }}
                    </div>
                    <div v-else class="me-auto pe-2" style="font-size: large;font-family: Dubai,serif; margin-bottom: 5px">
                      {{ item.value }}
                    </div>
                    <v-divider style="margin-top: 5px; margin-bottom: 15px"></v-divider>
                  </div>
<!--                  <v-divider style="margin: 5px"></v-divider>-->
                </v-list-item>
                <div class="mdiPlus" @click="change_org_show_all(true)" v-if="!org_show_all">
                  展开
                  <v-icon >
                    {{icons.mdiPlus}}
                  </v-icon>
                </div>
                <div class="mdiMinus" @click="change_org_show_all(false)" v-if="org_show_all">
                  收起
                  <v-icon >
                    {{icons.mdiMinus}}
                  </v-icon>
                </div>
              </v-list>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-col>

      <v-col cols="8" sm="8" >
        <v-tabs style="margin-bottom: 10px" :value="searchStatus.searchType">
          <v-tab  @click="sortSearch(0)">综合</v-tab>
          <v-tab @click="sortSearch(1)">最新</v-tab>
          <v-tab @click="sortSearch(2)">引用数</v-tab>
        </v-tabs>

        <vue-loading v-if="onLoading" type="cylon" color="#7f00ff" :size="{ width: '50px', height: '50px' }"></vue-loading>

        <div v-if="!onLoading">
          <PaperCard class="paperCard" v-for="(paper, index) in paperList" :paper="paper" :key="index">
          </PaperCard>
        </div>


        <v-card v-if="!onLoading && paperList.length === 0" style="margin-bottom: 50px">
          <h1 style="text-align: center; padding-top: 75px; height: 200px">
            没有搜索到内容~
          </h1>
        </v-card>

        <div class="text-center" @click="handlePage()">
          <v-pagination
              v-model="page"
              :length="page_length"
              :total-visible="9"
          ></v-pagination>
        </div>
      </v-col>

    </v-row>

    <v-row v-if="this.tab === 1" style="margin-top: 20px">

      <v-col cols="10" sm="1"></v-col>

      <v-col cols="10" sm="10" >
        <v-tabs style="margin-bottom: 10px" :value="searchStatusRe.searchType">
          <v-tab @click="sortSearchRe(0)">综合</v-tab>
          <v-tab @click="sortSearchRe(1)">h指数</v-tab>
          <v-tab @click="sortSearchRe(2)">引用数</v-tab>
          <v-tab @click="sortSearchRe(3)">论文数</v-tab>
        </v-tabs>

        <vue-loading v-if="onLoading" type="cylon" color="#7f00ff" :size="{ width: '50px', height: '50px' }"></vue-loading>

        <div v-if="!onLoading" >
          <UserCard v-for="(i, index) in userList" :key="index" class="paperCard" :author="i">
          </UserCard>
        </div>


        <v-card v-if="!onLoading && userList.length === 0" style="margin-bottom: 50px">
          <h1 style="text-align: center; padding-top: 75px; height: 200px">
            搜索到内容没有~
          </h1>
        </v-card>

        <div class="text-center" @click="handlePageRe()">
          <v-pagination
              v-model="page_re"
              :length="page_length_re"
              :total-visible="9"
          ></v-pagination>
        </div>
      </v-col>

    </v-row>

  </div>
</template>

<script>
import {
  mdiAccountOutline,
  mdiBellOutline,
  mdiFilterVariant,
  mdiGithub,
  mdiLockOpenOutline,
  mdiMagnify,
  mdiStarOutline,
  mdiTrendingUp,
  mdiPlus,
  mdiMinus,
  mdiCloseCircle,

} from "@mdi/js";
import PaperCard from "../components/PaperCard";
import { VueLoading } from 'vue-loading-template'
import SearchCard from "./search/SearchCard";
import ResearcherCard from "./search/ResearcherCard";
import UserCard from "../components/UserCard";
import {Base64} from "js-base64";
export default {
  name: "SearchResults",
  components: {ResearcherCard, PaperCard, VueLoading, SearchCard, UserCard},
  data() {
    return {
      doubleSearch: false,
      times:[],
      onLoading: false,
      data: null,
      pre_page: 1,
      pre_page_re: 1,
      page: 1,
      page_re:1,
      page_length: 1,
      page_length_re: 1,
      isFilter: false,
      searchValue: "Edge computing",
      myChart:[],
      paperList:[],
      userList:[],
      icons: {
        mdiMagnify,
        mdiBellOutline,
        mdiGithub,
        mdiLockOpenOutline,
        mdiAccountOutline,
        mdiStarOutline,
        mdiTrendingUp,
        mdiFilterVariant,
        mdiPlus,
        mdiMinus,
        mdiCloseCircle,
      },
      origin:{
        flag: false,
        gte: null,
        lte: null,
      },
      keyword:{
        index:null,
        flag: false,
        keyword: null,
      },
      author_org:{
        index:null,
        flag: false,
        org_id: null,
      },
      keywords:[],
      keywords_show: [],
      keyword_show_all: false,
      org:[],
      org_show:[],
      org_show_all:false,
      panel: [0, 1, 2],
      searchStatus: {
        searchType: 0,
        offset: 0
      },
      searchStatusRe: {
        searchType: 0,
        offset: 0
      },
      condFirst: {
        key : "标题",
        content: null,
      },
      condList: {
        list:[]
      },
      condFirstRe:{
        key : "姓名",
        content: null,
      },
      condListRe: {
        list: [],
      },
      tab: 0,
      res: null,
    }
  },
  methods:{
    handleTabs(index) {
      if(index === this.tab)
        return;
      this.tab = index
    },
    clearMessage() {
      this.searchValue = ""
    },
    handlePageRe() {
      if(this.page_re === this.pre_page_re)
        return ;
      this.pre_page_re = this.page_re;
      this.searchStatusRe.offset = (this.page_re - 1) * 20;
      this.searchHandleRe()
    },

    handlePage(){
      if(this.page === this.pre_page)
        return ;
      this.pre_page = this.page;
      this.searchStatus.offset = (this.page - 1) * 20;
      this.searchHandle()
    },

    change_keyword_show_all(x) {
      if(x === true) {
        this.keywords_show = this.keywords;
      }
      else {
        this.keywords_show = this.keywords.slice(0, 5)
      }
      this.keyword_show_all = x;
    },

    change_org_show_all(x) {
      if(x === true) {
        this.org_show = this.org;
      }
      else {
        this.org_show = this.org.slice(0, 5)
      }
      this.org_show_all = x;
    },

    setResponse(response) {
      // this.paperList.splice(0, this.paperList.length)
      this.onLoading = false
      this.paperList = response.paperList
      this.data = response.data
      this.page_length = Math.ceil(response.data.total/ 20)
      // this.searchStatus.searchType = 0;
      // console.log(this.page_length)

      if(response.aggs) {
        this.keywords = response.aggs[0].item;
        this.keywords_show = response.aggs[0].item.slice(0, 5);

        this.org = response.aggs[1].item;
        this.org_show = response.aggs[1].item.slice(0, 5);
      }
      // console.log(this.paperList)
    },
    setResponseRe(response) {
      // console.log(response)
      this.onLoading = false
      this.userList = response.userList
      this.data = response.data
      this.page_length_re = Math.ceil(response.data.total / 20)
    },

    searchHandle() {
      var title = this.condFirst.content;
      console.log(this.condFirst)
      var flag = false
      for (let i = 0; i < this.condList.list.length; i ++) {
        if(this.condList.list[i][2]) {
          flag = true;
          break;
        }
      }
      console.log(title)
      if(!title && !flag) {
        // console.log(title);
        this.paperList = [];
        this.keywords = [];
        this.keywords_show = [];
        this.org = [];
        this.org_show = [];
        this.page_length = 1;
        this.doubleSearch = false;
        return;
      }
      this.doubleSearch = true;

      this.page_length = 1;
      this.onLoading = true;


      const that = this;
      this.$api.aminerSearch.decode(this.searchStatus, this.origin, this.keyword, this.author_org, this.condFirst, this.condList)
      .then(function (response){
          that.res = response
          console.log(that.res)
          that.$router.push({
            path: '/searchResults',
            query:{
              str:that.res.str,
            }
          })
          that.$api.aminerSearch.get(that.res.str, false)
              .then(function (response) {
                that.setResponse(response);
              })
              .catch(error => that.$dialog.error({
                text: error,
                title: "API error"
              }))
      })

    },

    searchHandleRe() {
      let name = this.condFirstRe.content;
      // console.log(name)
      var flag = false
      for (let i = 0; i < this.condListRe.list.length; i ++) {
        if(this.condListRe.list[i][2]) {
          flag = true;
          break;
        }
      }
      if(!name && !flag) {
        this.userList = []
        this.page_length_re = 1;
        return;
      }
      this.page_length_re = 1;
      this.onLoading = true;
      const that = this;
      this.$api.aminerSearchRe.decode(this.searchStatusRe, this.condFirstRe, this.condListRe)
          .then(function (response) {
            that.res = response
            that.$router.push({
              path: '/searchResults',
              query:{
                str:that.res.str,
              }
            })
            that.$api.aminerSearchRe.get(that.res.str)
                .then(function (response) {
                  that.setResponseRe(response);
                })
                .catch(error => this.$dialog.error({
                  text: error,
                  title: "API error"
                }))
          })
    },

    searchByTime() {
      if(! this.doubleSearch)
          return;

      this.origin.flag = true;

      if(this.origin.gte > this.origin.lte) {
        let tmp = this.origin.gte;
        this.origin.gte = this.origin.lte;
        this.origin.lte = tmp;
      }
      // console.log(this.origin.gte);
      // console.log(this.origin.lte);
      this.searchHandle();

    },

    handleKeyword(index) {
      // console.log(index)
      let keyword = this.keywords_show[index].value;
      // console.log(keyword)
      if(this.keyword.index === index) {
        this.keyword.flag ^= 1;
      }
      else {
        this.keyword.index = index;
        this.keyword.flag = true;
        this.keyword.keyword = keyword;
      }
      this.searchHandle();
    },

    handleOrg(index) {
      // console.log(index)
      let org_id = this.org_show[index].value
      // console.log(org_id)
      if(this.author_org.index === index) {
        this.author_org.flag ^= 1;
      }
      else {
        this.author_org.index = index
        this.author_org.flag = true
        this.author_org.org_id = org_id
      }
      this.searchHandle();
    },
    sortSearch(searchType) {
      this.searchStatus.searchType = searchType;
      this.searchHandle();
    },
    sortSearchRe(searchType) {
      this.searchStatusRe.searchType = searchType;
      this.searchHandleRe();
    },
    advancedSearch() {
      // console.log(this.condFirst)
      // console.log(this.condList)
      // console.log(this.origin)
      this.searchHandle()
    },
    advancedSearchRe() {
      // console.log(this.condFirstRe)
      // console.log(this.condListRe)
      this.searchHandleRe()
    },
    initPara(data) {
      // console.log(data)
      // console.log(this.condFirst)
      this.condFirst.key = data.condFirst.key
      this.condFirst.content = data.condFirst.content
      this.condList.list = data.condList.list
      this.origin.flag = data.origin.flag
      this.origin.lte = data.origin.lte
      this.origin.gte = data.origin.gte
      this.searchStatus = data.searchStatus
      console.log(this.origin)
      this.keyword = data.keyword
      this.author_org = data.author_org
      this.tab = data.tab
      // console.log(this.condFirst)
    },
    initParaRe(data) {
      // console.log(data)
      // console.log(this.condFirst)
      this.condFirstRe.key = data.condFirstRe.key
      this.condFirstRe.content = data.condFirstRe.content
      this.condListRe.list = data.condListRe.list
      this.searchStatusRe = data.searchStatusRe
      this.tab = data.tab
      // console.log(this.condFirst)
    }

  },

  mounted() {
    for (let i = 2021; i >= 1921; i --) {
      this.times.push(i);
    }
    var str = this.$route.query.str;
    if(!str) {
      return;
    }
    var data = JSON.parse(Base64.decode(str))
    this.onLoading = true;
    if(data.type === "papers") {
      this.initPara(data)
      const that = this;
      that.$api.aminerSearch.get(str, true)
          .then(function (response) {
            that.setResponse(response);
          })
          .catch(error => that.$dialog.error({
            text: error,
            title: "API error"
          }))
    }
    else {
      this.initParaRe(data)
      const that = this;
      that.$api.aminerSearchRe.get(str)
          .then(function (response) {
            that.setResponseRe(response);
          })
          .catch(error => that.$dialog.error({
            text: error,
            title: "API error"
          }))
    }

  },
  created() {

  },
  setup() {

  },
};
</script>

<style scoped>

.mdiPlus{
  text-align: center;
}
.mdiMinus{
  text-align: center;
}
.paperCard{
  width: 100%;
  margin-bottom: 10px;
}
.autocomplete{
  width: 10%;
  margin-top: 20px;
  margin-right: 14px;
}
.searchBox{
  width: 50%;
  margin-top: 20px;
}
.searchBar{
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
}
.tabs{
  box-shadow: none !important;
  elevation: 0 !important;
  width: 83.2%;
  margin-left: 8.4%;
}
.tab{
  width: 20%;
  align-content: center;
  margin-left: 17%;
}
.keyWord{
  margin-top: -10px !important;
}
.advanceSearch{
  margin-left: 30%;
  width: 40%;
}
</style>